<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0, minimal-ui">
    <title>线路实时监测</title>
    <link rel="stylesheet" href="${s.base}/res/mobile/style/weui.css"/>
    <link rel="stylesheet" href="${s.base}/res/mobile/style/dodem.css"/>
    <link rel="stylesheet" href="${s.base}/res/mobile/style/font-awesome.min.css"/>
    <link rel="stylesheet" href="${s.base}/res/mobile/style/imageView.css"/>
<!--     <link rel="stylesheet" href="${s.base}/res/iconfont/bootstrap.min.css"> -->
    <link rel="stylesheet" href="${s.base}/res/iconfont/font-awesome.min.css">
 
	<style type="text/css">
	#timeSelect{
	    position: absolute;
		width: 100px;
		height: 30px;
		top: 3px;
		right: 5px;
		background: rgba(39, 97, 65, 0.9);;
		border: 1px solid #999;
		border-radius: 5px;
		box-shadow: 1px 1px 1px #000;
	}
	#timeBtn{
	 
		display: block;
		position: relative;
		top: 0px;
		right: 0px;
		text-align: center;
		line-height: 30px;
		width: 100%;
	}
	#appDateTime{
		position: absolute;
		top: 0;
		left: 0;
		float: left;
		background: none;
		border: none;
		color: rgba(0,0,0,0);
		width: 100%;
	}
	
	   #small_area_more,.err_text{
         clear: both;
	    height: 50px;
	 
	    text-align: center;
	    line-height: 50px;
	    color: white;
	    cursor:pointer;
     }
     
     .mor_pic_item{
      background: rgba(224, 224, 224,0.5);
		border-radius: 5px;
		border-top: 1px solid #fff;
		padding: 1px 0 1px 0;
		border-bottom: 1px solid;
		margin-bottom: 2px;
     }
     .mor_pic_item .picTime{
	 
		 padding-left: 5px;
     }
     .mor_pic_item img{
       box-shadow: 0px -1px 3px #fff,0px 1px 3px #fff;
       margin-bottom: -3px;
     }
    .mor_pic_item #picdesc {
        border-top: 1px solid #fff;
 
        margin: 0 1px 0 1px;
     }
     .mor_pic_item #picdesc:empty{
       display:none
     }
     #imgList{
     padding:5px}
     .fd_tool .weui_tabbar_icon{
     width:36px;
     }
     .fd_tool a,.fd_tool .weui_tabbar_label{color:white;}
     .fd_tool  a.weui_bar_item_on {color:#09BB07}
 a {
	color:white;
}
.level_2 a{
color:black;
width: 100%;
height: 100%;
}
 a:active{
	 color:#09BB07;
	 background:rgba(255,255,255,0.5);
	 border-radius:30%;
}

.ui-loader-default{
display:none;
}
	</style>
	
	   <script type="text/javascript">
		CONETXT_PATH = '${s.base}';
  		
 /* 	var _PUID = window.sessionStorage? sessionStorage.getItem("G_PUID"): Cookie.read("G_PUID");	
 	var _TYPE = window.sessionStorage? sessionStorage.getItem("G_TYPE"): Cookie.read("G_TYPE");	
		// console.log("strStoreDate==="+strStoreDate)
		 if(sessionStorage!=undefined)
			 {
	            	G_PUID=_PUID;
	            	G_TYPE=_TYPE==null?'imglist':_TYPE;
			 }
		 else
			 {*/
			     G_PUID = '${puid!}';
				  G_TYPE ="${type!'imglist'}"; 
				  /* 			  if (window.sessionStorage) {
						 
					    sessionStorage.setItem("G_TYPE", G_TYPE);	
				 } else {
					    Cookie.write("G_TYPE", G_TYPE);	
				 }
			 } */
			 
			 if(G_TYPE=="")G_TYPE="imglist";
		
   
	</script>
</head>
<body ontouchstart>
<!-- <video width="352" height="264" controls autobuffer>
    <source src="../media/cat.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'></source>
</video> -->
    <div class="hd">
      <a href="javascript:;" class="hd_btn" onclick="toggleSysCount(this)">
      
       <i class="icon-reorder icon-2x"></i>   
	  </a> 
	   <div class="hd_content">	
       <!-- <h2 class=" ">当前设备</h2> -->
       <span>&nbsp>&nbsp</span>
          <span   id="now_equip" style="  "  puid=${puid!}>${name!}</span>
       	  <!--#if Session ["uname"]?exists> 
	         <span>$--{Session ["uname"]!}</span> 
	     < -- /#if-->
	     <div id="timeSelect">
		     <a href="#" id="timeBtn">更改时间</a>
		     <input type="text" name="appDateTime" id="appDateTime" />
	     </div>
       </div>
    </div>
    <div class="container" id="container">
    <!-- 类容顶部占位  freemarker  /qyweix/equip/imglist/151038400596510844.do -->
       <!--  <div  class="hd_space"></div> -->
       <!--     <div class="main_content"   > </div> -->
       <#if puid??>
     
	       <div id="syscounts"  default="${s.base}/equip/syscounts.do" style="display:none"></div>
	          <!--  开始 -->
				 <div   id="imgList"  class="img_content   dcontent scroll"  onscroll="lazyLoadPic(this)"  style="display:block">
					<!--    本标签使用的是freemarker -->
					         <ul   id="small_area" default="${s.base}/equip/{type}/{puid}.do" >	
							 </ul>
				  </div>
			  <!-- 结束 -->
           
        <#else>
              <div id="syscounts"  default="${s.base}/equip/syscounts.do" style="display:block" ></div>
          <!--  开始 -->
          
			 <div   id="imgList"  class="img_content   dcontent scroll"  onscroll="lazyLoadPic(this)"  style="display:block">
				<!--    本标签使用的是freemarker -->
				         <ul   id="small_area" default="${s.base}/equip/{type}/{puid}.do"  >
    	
						 </ul>
			  </div>
			  <!-- 结束 -->
        
             
       </#if>
       

    </div>
    
   <div class="weui_tabbar  fd_tool">
    
		        <a href="javascript:;" class="weui_tabbar_item  view_pic view" tar="${s.base}/equip/imglist/{puid}.do">
		            <div class="weui_tabbar_icon">
		                <i class="icon-picture icon-2x"></i>
		            </div>
		            <p class="weui_tabbar_label">现场图片</p>
		        </a>
		        <a href="javascript:;" class="weui_tabbar_item  view_video view" tar="${s.base}/equip/videolist/{puid}.do">
		            <div class="weui_tabbar_icon">
		                <i class="icon-facetime-video icon-2x"></i>
		            </div>
		            <p class="weui_tabbar_label">视频短片</p>
		        </a>
		         <a href="javascript:;" class="weui_tabbar_item  btn_getPic" tar="${s.base}/getpic/{puid}.do" style="display:none">
		            <div class="weui_tabbar_icon">
		                <i class=" icon-camera icon-2x"></i>
		            </div>
		            <p class="weui_tabbar_label">图片抓取</p>
		        </a>
		         <a href="javascript:;" class="weui_tabbar_item  btn_getVideo" tar="${s.base}/getvedio/{puid}.do" style="display:none" >
		            <div class="weui_tabbar_icon">
		                <i class="icon-film icon-2x"></i>
		            </div>
		            <p class="weui_tabbar_label">视频抓取</p>
		        </a>
		        <a href="javascript:;" class="weui_tabbar_item weui_bar_item_on  view_status"  tar="${s.base}/equip/syscounts.do" style="display:none">
		            <div class="weui_tabbar_icon">
		                <img src="${s.base}/res/mobile/images/dev.png" alt="">
		            </div>
		            <p class="weui_tabbar_label">设备状态</p>
		        </a>
      
   </div>


<div id="video_view"  >
    <div class=""> 
      <div class="close">X</div>
    </div>
    <div class="video_area" style="width:100%;height:100%; ">
   <!--   <video src="./20160521120620_0166.mp4" width="100%" height="100%" controls autoplay loop>
	 <source type=video/mp4 />
	     Your browser does not support the video tag.
	 </video>  -->
    </div>
</div>

<!--end toast-->
     
 <!-- 底部浮动工具 -->
  <a href="javascript:;" class="fd_btn">
     <div class=""></div>	          
     <img src="${s.base}/res/mobile/images/icon_nav_button.png"  width=30 height=30 alt="">		             	          
  </a> 
     <script src="${s.base}/res/pc/js/jquery-1.9.1.min.js"></script>  
     <!--   <script src="${s.base}/res/mobile/js/zepto.min.js"></script>-->
    <!--    <script src="${s.base}/res/mobile/js/zepto.touch.js"></script>  -->
      <script src="${s.base}/res/js/lazyLoadPic.js"></script>
      <script src="${s.base}/res/mobile/js/dodem.js"></script>
<!--  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> -->
     <script src="${s.base}/res/pc/js/jquery.mobile-1.4.5.min.js"></script> 
<!--   <link href="${s.base}/res/mobile/css/jquery.mobile-1.4.5.min.css" rel="stylesheet" type="text/css" />  -->
      <script src="${s.base}/res/mobile/js/mobiscroll.core-2.5.2.js" type="text/javascript"></script>
	<script src="${s.base}/res/mobile/js/mobiscroll.core-2.5.2-zh.js" type="text/javascript"></script>

	<link href="${s.base}/res/mobile/css/mobiscroll.core-2.5.2.css" rel="stylesheet" type="text/css" />
	<link href="${s.base}/res/mobile/css/mobiscroll.animation-2.5.2.css" rel="stylesheet" type="text/css" />
	<script src="${s.base}/res/mobile/js/mobiscroll.datetime-2.5.1.js" type="text/javascript"></script>
	<script src="${s.base}/res/mobile/js/mobiscroll.datetime-2.5.1-zh.js" type="text/javascript"></script>

		<!-- S 可根据自己喜好引入样式风格文件 --> 
	<link href="${s.base}/res/mobile/css/mobiscroll.sense-ui-2.5.1.css" rel="stylesheet" type="text/css" /> 
	
	<!-- E 可根据自己喜好引入样式风格文件 -->
	<script type="text/javascript">
        $(function () {
        	
        	
            $("body").on("click","#small_area_more",function(){
          	  var puid=$("#now_equip").attr("puid");
  			  var src = CONETXT_PATH + "/equip/imglist/" +puid
					+ ".do";
				  var tlong=$("#small_area  li:last").attr("tlong");
				  
				 if ($("#weixin_video").hasClass("active")) {
      				var src = CONETXT_PATH + "/equip/videolist/"
      						+ puid+ ".do"; 
      			}
	  			 $.ajax({
	  		            type:"GET",
	  		            url:src, 
	
	  		            data: "time="+tlong,
	  		            success:function(html){
	  		            	$("#small_area_more").replaceWith(html);
	  		            },
	  		            error:function(XMLHttpRequest, textStatus, thrownError){}
	  		        })
		  	 			
		  })
           //点击确认时间
           function mobiscroll_select(timestr){
        	 //  alert(timestr)
        	   var timestamp2 = Date.parse(new Date(timestr));
        	  var puid=$("#now_equip").attr("puid");
        	   
        	   var src = CONETXT_PATH + "/equip/imglist/" +puid + ".do";
				
			   if ($(".view_video").hasClass("weui_bar_item_on")) {
    				 src = CONETXT_PATH + "/equip/videolist/" + puid + ".do";
    			}
			   $.ajax({
		            type:"POST",
		            url:src, 
		            dataType:'html',
		            data: "time="+timestamp2,
		            success:function(html){
		            	$("#small_area").html(html);
		            },
		            error:function(XMLHttpRequest, textStatus, thrownError){}
		        })
			 
           }
		var currYear = (new Date()).getFullYear();	
			var opt={};
			opt.date = {preset : 'date'};
			//opt.datetime = { preset : 'datetime', minDate: new Date(2012,3,10,9,22), maxDate: new Date(2014,7,30,15,44), stepMinute: 5  };
			opt.datetime = {preset : 'datetime'};
			opt.time = {preset : 'time'};
			opt.default = {
				theme: 'sense-ui', //皮肤样式
		        display: 'modal', //显示方式 
		        mode: 'scroller', //日期选择模式
				lang:'zh',
				onSelect:mobiscroll_select,
		        startYear:currYear - 10, //开始年份
		        endYear:currYear + 10 //结束年份
			};

		 
		  	var optDateTime = $.extend(opt['datetime'], opt['default']);
		  	var optTime = $.extend(opt['time'], opt['default']);
		    $("#appDateTime").mobiscroll(optDateTime).datetime(optDateTime);

        });

    </script>
    <!--BEGIN toast-->
<#include "./mobile/showTipInfo.html">
</body>
</html>